<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link href='./scripts/bootstrap/css/bootstrap.min.css' rel='stylesheet' />
	<link href='./scripts/bootstrap/bootstrap-table/bootstrap-table.css' rel='stylesheet' />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

	#div4{
			/*width:200px;
			height:450px;
			position:absolute;
			bottom:30px;
			right: 30px;
			border: 1px solid black;
			background-color: white;*/

			left: 10px;
			top: 100px;
			height:485px;
			width: 300px;
			position: absolute;
			border: 2px solid #D6E3F1;
			background:white;
			z-index: 9999;
			border-top-width: 0px;
			display: block;
	}

	#title1{
		width: 100%;
		height: 30px;
		background-color: #5Fb8f1;
		padding-left: 15px;
		padding-top: 6px;
		color: white;
	}

	#inputdiv{
		margin-left:5px;
		margin-top:5px;
		width:190px;
		display: inline-block;
	}

	#selectdiv{
		display: inline-block;
		margin-left:5px;
		margin-top:5px;
		display:inline-block;
		width:85px;
		display: inline-block;
	}

	table tr:nth-child(odd){
		background: #ccc;
	}

	#div2{
			/*width:200px;
			height:450px;
			position:absolute;
			bottom:30px;
			right: 30px;
			border: 1px solid black;
			background-color: white;*/

			right:15px;
			bottom:15px;
			height:250px;
			width: 150px;
			position: absolute;
			border: 2px solid #D6E3F1;
			background:white;
			z-index: 9999;
			border-top-width: 0px;
			display: block;
	}

	#title{
		width: 100%;
		height: 30px;
		background-color: #5Fb8f1;
		text-align: center;
		padding-top: 6px;
		color: white;
	}

	.div3{
		width: 100%;
		height: 40px;
	}

	.img{
		width: 24px;
		height: 24px;
		display: inline-block;
		vertical-align: middle;
		margin-left: 15px;
		margin-top: 8px;
	}

	.spa{
		color: black;
		font-size: 16px;
		margin-left: 0px;
		display: inline-block;
		vertical-align: middle;
		margin-top: 5px;
	}
	</style>
	<script type="text/javascript" src="./scripts/jquery/jquery-3.0.0.min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yaVqhnXO1G1dKLXsEG9yxYcLh38iXqVY"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	// var dataArr = [{"add":"江西进贤县梅庄镇镇政府500M处",       "name":" 进贤       ","num":"623A1400","lon":116.411650,"lat":28.570000,"type":"SS"},
// {"add":"江西进贤县梅庄镇镇政府500M处",       "name":" 进贤       ","num":"623A1401","lon":116.411650,"lat":28.570000,"type":"SS"},
// var dataArr = [{"add":"江西省临川区鹏田乡",            	"name":"  	廖坊  ","num":"62401300","lon":116.631400,"lat":27.752500,"type":"RR"},
// {"add":"抚州市临川区         ",            "name":"  	廖坊坝下*  ","num":"62401350","lon":116.633333,"lat":27.750000,"type":"RR"},
// {"add":"石门乡窑上村         ",              "name":" 窑上       ","num":"62401550","lon":116.300000,"lat":27.550000,"type":"PZ"},
// {"add":"浒湾镇上市村         ",              "name":" 上市       ","num":"62401650","lon":116.300000,"lat":27.550000,"type":"PZ"},
// {"add":"临川区湖南乡高堑村      ",          "name":" 	廖家湾     ","num":"62401800","lon":116.400300,"lat":27.975600,"type":"ZQ"},
// {"add":"江西省抚州市临川区解放桥   ",       "name":" 	解放桥     ","num":"62402200","lon":116.359400,"lat":27.997800,"type":"ZZ"},
// {"add":"江西进贤县李渡镇焦石村    ",      "name":"   	焦石坝水库 ","num":"62402300","lon":116.167000,"lat":28.167000,"type":"RR"},
// // {"add":"江西进贤县李渡镇       ",           "name":" 	李家渡     ","num":"62402400","lon":116.158972,"lat":28.217555,"type":"ZQ"},
// // {"add":"江西进贤县李渡镇       ",           "name":" 	柴埠口     ","num":"62402600","lon":116.178583,"lat":28.232333,"type":"ZZ"},
// // {"add":"江西进贤县李渡镇       ",            "name":" 焦石       ","num":"62402800","lon":116.152583,"lat":28.211472,"type":"ZZ"},
// // {"add":"江西南昌县黄马乡       ",           "name":" 	箭江口     ","num":"62402900","lon":116.088100,"lat":28.286700,"type":"ZZ"},
// // {"add":"江西进贤县温圳镇       ",           "name":" 	温家圳     ","num":"62403000","lon":116.076972,"lat":28.341888,"type":"ZZ"},
// {"add":"南城县徐家乡白洲村      ",          "name":" 	八堡堤     ","num":"62405820","lon":116.647500,"lat":27.623300,"type":"ZZ"},
// {"add":"江西省南城县建昌镇姚家巷村  ",     "name":"  	麻源水库   ","num":"62405860","lon":116.576400,"lat":27.565800,"type":"RR"},
// {"add":"金溪县石门乡石门村      ",           "name":" 石门       ","num":"62429500","lon":116.658600,"lat":27.779200,"type":"PP"},
// {"add":"金溪县石门乡下彭村      ",           "name":" 下彭       ","num":"62429560","lon":116.373000,"lat":27.492000,"type":"PP"},
// {"add":"金溪县秀谷镇政府       ",            "name":" 金溪       ","num":"62429600","lon":116.760600,"lat":27.914400,"type":"PP"},
// {"add":"金溪县浒湾镇浒湾村      ",           "name":" 浒湾       ","num":"62429900","lon":116.300000,"lat":27.550000,"type":"ZZ"},
// {"add":"金溪县浒湾镇黄坊村      ",           "name":" 黄坊       ","num":"62429920","lon":116.293000,"lat":27.563000,"type":"PP"},
// // {"add":"江西南昌县黄马乡官田村    ",         "name":" 官田       ","num":"62438380","lon":116.050000,"lat":28.311499,"type":"PP"},
// // {"add":"江西南昌县黄马乡蚕桑研究所  ",      "name":" 	蚕桑场     ","num":"62438420","lon":115.982200,"lat":28.405300,"type":"PP"},
// {"add":"江西抚州市临川区崇岗镇    ",         "name":" 临川       ","num":"624A1000","lon":116.379683,"lat":27.894167,"type":"SS"},
// {"add":"江西抚州市临川区崇岗镇    ",         "name":" 临川       ","num":"624A1001","lon":116.379683,"lat":27.894167,"type":"SS"},
// {"add":"江西南城县          ",               "name":" 南城       ","num":"624A2000","lon":116.611383,"lat":27.628000,"type":"SS"},
// {"add":"江西南丰县白舍镇       ",            "name":" 南丰       ","num":"624A3000","lon":116.458217,"lat":27.096833,"type":"SS"},
// {"add":"江西省南城县里塔镇廖坊村   ",      "name":"  	若岭水库   ","num":"624R1260","lon":116.481900,"lat":27.379400,"type":"RR"},
// {"add":"江西省南城县株良镇云市村   ",      "name":"  	高桥水库   ","num":"624R1280","lon":116.515600,"lat":27.457200,"type":"RR"},
// {"add":"江西省南城县新丰街镇梅溪村  ",     "name":"  	沙窠水库   ","num":"624R1320","lon":116.601700,"lat":27.393900,"type":"RR"},
// {"add":"江西省南城县株良镇杨梅村   ",      "name":"  	下坊水库   ","num":"624R1400","lon":116.587200,"lat":27.481700,"type":"RR"},
// {"add":"江西省南城县新丰街镇田东村  ",     "name":"  	松沅水库   ","num":"624R1440","lon":116.608600,"lat":27.425800,"type":"RR"},
// {"add":"江西省南城县万坊镇万坊村   ",     "name":"   	山中圩水库 ","num":"624R1640","lon":116.582800,"lat":27.624400,"type":"RR"},
// {"add":"江西省南城县徐家乡湖东村   ",      "name":"  	石溪水库   ","num":"624R1660","lon":116.671100,"lat":27.620300,"type":"RR"},
// {"add":"江西省金溪县石门乡公塘村   ",      "name":"  	付家水库   ","num":"624R1760","lon":116.633300,"lat":27.800000,"type":"RR"},
// {"add":"江西省金溪县石门乡横源村   ",      "name":"  	厚坑水库   ","num":"624R1880","lon":116.690300,"lat":27.809400,"type":"RR"},
// {"add":"江西省金溪县石门乡靖思村   ",      "name":"  	涂岭水库   ","num":"624R1860","lon":116.734700,"lat":27.806400,"type":"RR"},
// {"add":"江西省临川区湖南平上     ",        "name":"  	五四水库   ","num":"624R2040","lon":116.478800,"lat":27.968200,"type":"RR"},
// {"add":"江西省临川区湖南梅岗     ",        "name":"  	三八水库   ","num":"624R2060","lon":116.486100,"lat":27.985600,"type":"RR"},
// {"add":"江西省临川区太阳湖溪     ",        "name":"  	辉煌水库   ","num":"624R3720","lon":116.496700,"lat":28.047200,"type":"RR"},
// {"add":"江西省进贤县长山乡新居村委会 ",   "name":"   	朱家巷水库 ","num":"624R4202","lon":116.238000,"lat":28.223500,"type":"RR"},
// {"add":"江西省进贤县长山乡      ",         "name":"  	新华水库   ","num":"624R4220","lon":116.224400,"lat":28.270900,"type":"RR"},
// {"add":"江西省进贤县白圩乡连桥村委会 ",    "name":"  	干劲水库   ","num":"624R4240","lon":116.245000,"lat":28.271700,"type":"RR"}];
// // {"add":"江西省进贤县白圩乡园艺村委会 ",    "name":"  	卫星水库   ","num":"624R4260","lon":116.265800,"lat":28.276700,"type":"RR"}];
// // {"add":"江西南昌县墉南镇       ",            "name":" 红旗       ","num":"62606320","lon":116.183333,"lat":28.716666,"type":"ZZ"},
// // {"add":"江西进贤县三阳集乡      ",           "name":" 三阳       ","num":"62606800","lon":116.273083,"lat":28.619666,"type":"ZZ"},
// // {"add":"江西南昌县塔城乡       ",            "name":" 塔城       ","num":"62606340","lon":116.100000,"lat":28.500000,"type":"ZZ"},
// // {"add":"江西省丰城市袁渡镇雷徐村   ",     "name":"   	相狮象水库 ","num":"626R1460","lon":116.060000,"lat":28.170000,"type":"RR"},
// // {"add":"江西省丰城市袁渡镇尧家村   ",     "name":"   	老虎窟水库 ","num":"626R1480","lon":116.070000,"lat":28.200000,"type":"RR"},
// // {"add":"江西省丰城市袁渡镇河塘村   ",     "name":"   	芭蕉坑水库 ","num":"626R1500","lon":116.060000,"lat":28.230000,"type":"RR"},
// // {"add":"江西省进贤县温圳镇罗家村委会 ",    "name":"  	五九水库   ","num":"626R1580","lon":116.122300,"lat":28.371100,"type":"RR"},
// // {"add":"江西省进贤县白圩乡金山村委会 ",    "name":"  	梅家水库   ","num":"626R1740","lon":116.257800,"lat":28.603900,"type":"RR"},];
var ifSelect = false;
var dataArr = [
{"num":"62405200","name":"沙子岭"    ,"lon":"116.3440","lat":"26.8806","type":"ZQ"},
{"num":"62405400","name":"南丰"      ,"lon":"116.5312","lat":"27.2052","type":"ZQ"},
{"num":"62405800","name":"南城"      ,"lon":"116.6352","lat":"27.5474","type":"ZZ"},
{"num":"62401800","name":"廖家湾"    ,"lon":"116.4004","lat":"27.9757","type":"ZQ"},
{"num":"62406600","name":"娄家村(二)","lon":"116.2965","lat":"27.9893","type":"ZQ"},
{"num":"62408600","name":"马圩"      ,"lon":"116.4544","lat":"28.1204","type":"ZQ"},
{"num":"62402400","name":"李家渡"    ,"lon":"116.2511","lat":"28.2175","type":"ZQ"},
{"num":"62402600","name":"焦  石"    ,"lon":"116.254783","lat":"28.213672","type":"ZZ"},
{"num":"62402800","name":"柴埠口"    ,"lon":"116.178583","lat":"28.183401","type":"ZZ"},
{"num":"62403400","name":"洪门"      ,"lon":"116.7217","lat":"27.4733","type":"RR"},
{"num":"62401300","name":"廖坊"      ,"lon":"116.631400","lat":"27.752500","type":"RR"},
{"num":"62401350","name":"廖坊坝下*" ,"lon":"116.633333","lat":"27.750000","type":"RR"}
// {"num":"62310700","name":"芦溪"      ,"lon":"114.037583","lat":"27.642638","type":"ZQ"},
// {"num":"62336856","name":"虹桥"      ,"lon":"114.116666","lat":"27.683333","type":"ZZ"},
// {"num":"62310800","name":"棚下(生态)","lon":"114.156783","lat":"27.733636","type":"ZZ"},
// {"num":"62310900","name":"宜春"      ,"lon":"114.379500","lat":"27.800611","type":"ZZ"},
// {"num":"62310920","name":"彬江"      ,"lon":"114.54175","lat":"27.791861","type":"ZZ"},
// {"num":"62311200","name":"新余"      ,"lon":"114.939305","lat":"27.798583","type":"ZZ"},
// {"num":"62311470","name":"孔目江"    ,"lon":"114.943055","lat":"27.817694","type":"ZZ"},
// {"num":"62337940","name":"罗坊"      ,"lon":"115.117222","lat":"27.855666","type":"ZZ"},
// {"num":"62338750","name":"(庙前)临江","lon":"115.390472","lat":"27.980805","type":"ZZ"},
// {"num":"62336570","name":"山口岩"    ,"lon":"114.016666","lat":"27.583333","type":"RR"},
// {"num":"62311050","name":"江口"      ,"lon":"114.825777","lat":"27.735555","type":"RR"}
];
	// 百度地图API功能
	var map = new BMap.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMap.Point(116.4468383789,27.5813290750), 10);  // 初始化地图,设置中心点坐标和地图级别
	// map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
	map.setCurrentCity("抚州");          // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
		//去除路网和绿地
		var myStyleJson = [ {
			"featureType" : "road",
			"elementType" : "all",
			"stylers" : {
				"visibility" : "off"
			}
		}, {
			"featureType" : "green",
			"elementType" : "all",
			"stylers" : {
				"visibility" : "off"
			}
		} ]
		map.setMapStyle({
			styleJson : myStyleJson
		});
		var mapLinePonit;
		$.getJSON('./map2.json', function(data){
			console.log(data)
			mapLinePonit = data.features[0].geometry.rings[0];
			var points = [];
			for(var i=0; i<mapLinePonit.length; i++){
				points.push(new BMap.Point(mapLinePonit[i][0], mapLinePonit[i][1]))
			}
			var  test = [
				new BMap.Point(116.399, 39.910),
				new BMap.Point(116.405, 39.920),
				new BMap.Point(116.423493, 39.907445)
			];
			console.log('test', test)
			console.log('ponits', points)
			var polyline = new BMap.Polyline(points, {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});   //创建折线
			console.log('polyline', polyline)
			map.addOverlay(polyline);   //增加折线
		});

		for(var i=0;i<dataArr.length;i++){

			var content = '<div style = "width:300px;height:100px;" id = "allDiv">'
			+'<div style = "color:black;display:inline-block;font-size:20px;margin-left:10px;width:195px;">'+ dataArr[i]['name'] +'</div>'
			+'<div style = "padding-top:8px;padding-left:8px;width:auto;height:auto;color:height;font-size:16px;">测站编码 : '+ dataArr[i]['num'] + '</div>'
			// +'<div style = "padding-top:8px;padding-left:8px;width:auto;height:auto;color:height;font-size:16px;">地址 : '+ dataArr[i]['add'] + '</div>'
			+'<div style = "padding-top:8px;padding-left:8px;width:auto;height:auto;color:height;font-size:16px;">水位 : 23.9 m </div>'
			+'<div style = "padding-top:8px;padding-left:8px;width:auto;height:auto;color:height;font-size:16px;">流量 : 46.23 m<sup>3</sup></div>'
			+'</div>'

			var marker = new BMap.Marker(new BMap.Point(dataArr[i]['lon'],dataArr[i]['lat']));  // 创建标注

			map.addOverlay(marker);               // 将标注添加到地图中
			addClickHandler(content,marker);
		}

		map.addEventListener("click",function(e){
			if (!ifSelect) {
				 return;
			}
			var marker = new BMap.Marker(new BMap.Point(e.point.lng,e.point.lat));  // 创建标注
			map.addOverlay(marker);               // 将标注添加到地图中
			var content = '<div style = "width:455px;height:325px;border:1px solid #00BFFF;margin-top:15px;" id = "allDiv">'
		 +'<div style = "width:100%;height:40px;background-color:#00BFFF;">'
		 +'<div style = "color:white;margin-left:15px;float:left;margin-top:10px;font-size:16px;width:auto;">人工填报</div>'
		 +'<div style = "margin-left:330px;width:40px;height:40px;float:left;"></div>'
		 +'</div>'
		 +'<div style = "width:100%;height:50px;background-color:white">'
		 + '<button type="button" class="btn btn-default" onclick = "save()" style = "margin-top:9px;margin-left:82%;">保存</button> '
		 +'</div>'
		 +'<div style = "margin-left:20px;margin-right:20px;height:254px;">'
		 +'<div style = "margin-top:5px;margin-left:3px;width:80px;font-size:16px;display:inline-block">事件名称:</div>'
		 +'<div style = "margin-top:5px;width:330px;font-size:16px;display:inline-block"> <input type="text" class="form-control"></div>'
		 +'<div style = "margin-top:10px;width:80px;font-size:16px;display:inline-block">事件类型:</div>'
		 +'<div style = "margin-top:10px;width:100px;font-size:16px;display:inline-block;"> <select class="form-control" onchange="selectOnchang(this)" id = "selectdiv">'
		 +'<option>1</option>'
		 +'<option>2</option>'
		 +'<option>3</option>'
		 +'<option>4</option>'
		 +'</select></div>'
		 +'<div style = "margin-top:10px;margin-left:3px;width:80px;font-size:16px;display:inline-block">发生时间:</div>'
		 +'<div style = "margin-top:10px;width:150px;font-size:16px;display:inline-block;"><input type="date" class="form-control">'
		 // <select class="form-control" onchange="selectOnchang(this)" id = "selectdiv">'
		 // +'<option>1</option>'
		 // +'<option>2</option>'
		 // +'<option>3</option>'
		 // +'<option>4</option>'
		 // +'</select>'
		 +'</div>'
		 +'<div style = "margin-top:10px;margin-left:1px;width:80px;font-size:16px;display:inline-block;">发生区域:</div>'
		 +'<div style = "margin-top:10px;width:330px;font-size:16px;display:inline-block"> <input type="text" class="form-control"></div>'
		 +'<div style = "margin-left:3px;width:80px;height:80px;font-size:16px;margin-top:10px;float:left">事件描述:</div>'
		 +'<div style = "margin-top:10px;width:330px;font-size:16px;height:80px;float:left;display:inline-block;"><textarea class="form-control" rows="3"></textarea></div>'
		 +'</div>'
		 +'</div>'
			addClickHandler(content,marker);

			ifSelect = false;
			parent.window.changeSta();
		});

		function addClickHandler(content,marker){
			marker.addEventListener("click",function(e){
				openInfo(content,e)}
			);
		}

		function openInfo(content,e){
			var p = e.target;
			var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
			var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象
			map.openInfoWindow(infoWindow,point); //开启信息窗口
		}

		function changePoState(ifSel){
			ifSelect = ifSel;
		}
</script>
